<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogVisible"
    width="350px"
    @close="close"
  >
    <template slot="title">
      <el-button v-print="print" icon="el-icon-printer" type="primary">
        打印
      </el-button>
    </template>
    <div id="printArea">
      <div class="t d-flex">
        <div class="t-l text-align-center">
          <div class="t-l-1 d-flex flex-column">
            <vue-barcode
              :display-value="false"
              :height="height"
              :margin="1"
              :value="substr(blood.id_out, 0, 14)"
              :width="1.2"
            >
              原始血袋号
            </vue-barcode>
            <div>
              <span class="font12">
                {{ substr(blood.id_out, 0, 5) }}
              </span>
              <span class="font12">
                {{ substr(blood.id_out, 5, 2) }}
              </span>
              <b class="font12">
                {{ substr(blood.id_out, 7, 7) }}
              </b>
              <span
                class="font12 text-align-center"
                style="
                  display: inline-block;
                  padding: 2px 3px;
                  margin-right: 1px;
                  border: 1px solid #999;
                "
              >
                {{ substr(blood.id_out, 14, 1) }}
              </span>
              <span
                class="font12 text-align-center"
                style="
                  display: inline-block;
                  padding: 2px 3px;
                  margin-right: 1px;
                  border: 1px solid #999;
                "
              >
                {{ substr(blood.id_out, 15, 1) }}
              </span>
              <span
                class="font12 text-align-center"
                style="
                  display: inline-block;
                  padding: 2px 3px;
                  border: 1px solid #999;
                "
              >
                {{ substr(blood.id_out, 16, 1) }}
              </span>
            </div>
            <b class="font12">{{ bloodPrint.hospital.name }}</b>
            <b class="font12">{{ bloodPrint.hospital.nameShort }}</b>
            <span class="font12">{{ bloodPrint.hospital.descri }}</span>
          </div>
          <div class="t-l-2 d-flex flex-column" style="margin-top: 4px">
            <vue-barcode
              :display-value="false"
              :height="height"
              :margin="1"
              :value="blood.id"
              :width="1.5"
            >
              血袋号
            </vue-barcode>
            <b class="font20">{{ blood.id }}</b>
            <span v-if="blood.pid" class="font12">
              制备前血袋号：{{ blood.pid }}
            </span>
          </div>
          <div class="t-l-3 d-flex flex-column">
            <vue-barcode
              :display-value="false"
              :height="height"
              :margin="1"
              :value="
                (blood && blood.product_code) || bloodPrint.aboRhd.product_code
              "
              :width="1.1"
            >
              血液成分码
            </vue-barcode>
            <span class="text-align-left">
              {{
                (blood && blood.product_code) || bloodPrint.aboRhd.product_code
              }}
            </span>
            <b class="font15 mb4 mt4">
              {{ (blood.product && blood.product.name) || '' }}
            </b>
            <span class="font15">
              血量：{{ (+blood.capacity).toFixed(1) }}U
            </span>
          </div>
        </div>
        <div class="t-r">
          <div
            class="t-r-1 d-flex flex-column align-items-center text-align-center"
          >
            <b class="font64" :class="blood.rhd === '阴性' ? 'stroke' : ''">
              {{ blood.abo }}
            </b>
            <b
              class="pd4 mb4"
              :class="blood.rhd === '阴性' ? 'bg-black color-white' : ''"
              style="display: inline-block; -webkit-print-color-adjust: exact"
            >
              RH(D){{ blood.rhd }}
            </b>
            <vue-barcode
              :display-value="false"
              :height="height"
              :margin="1"
              :value="(blood && blood.abo_code) || bloodPrint.aboRhd.code"
              :width="2"
            >
              血型RHD码
            </vue-barcode>
            <span>
              {{ (blood && blood.abo_code) || bloodPrint.aboRhd.code }}
            </span>
          </div>
          <div class="h8"></div>
          <div class="t-r-2 d-flex flex-column">
            <span class="font12">
              采血时间:
              <b>
                {{
                  (blood.collect_time && blood.collect_time.substr(0, 16)) || ''
                }}
              </b>
            </span>
            <div class="h8"></div>
            <span class="font12">
              制备时间:
              <b v-if="blood.preFrom">
                {{
                  (blood.preFrom &&
                    blood.preFrom.created_at &&
                    blood.preFrom.created_at.substr(0, 16)) ||
                  ''
                }}
              </b>
              <b v-if="blood.subFrom">
                {{
                  (blood.subFrom &&
                    blood.subFrom.created_at &&
                    blood.subFrom.created_at.substr(0, 16)) ||
                  ''
                }}
              </b>
            </span>
            <div class="h8"></div>
            <span class="font12">
              失效时间:
              <b>
                {{
                  (blood.invalid_time && blood.invalid_time.substr(0, 16)) || ''
                }}
              </b>
            </span>
            <div class="h8"></div>
            <vue-barcode
              :display-value="false"
              :height="height"
              :margin="1"
              :value="getInvalidCode()"
              :width="1.2"
            >
              失效时间码
            </vue-barcode>
            <div class="h8"></div>
            <span class="font12">
              储存：{{
                (blood.product && blood.product.temperature_self) || ''
              }}
            </span>
          </div>
        </div>
      </div>
      <div class="h9"></div>
      <div class="b d-flex align-items-center">
        <div
          v-for="(item, index) in bloods"
          :key="index"
          class="b-c text-align-center"
        >
          <span class="mr4">{{ blood.donor_id }}</span>
          <span>{{ getBloodUser(blood) }}</span>
          <vue-barcode
            :display-value="false"
            :height="height"
            :margin="1"
            :value="blood.tube_number"
            :width="1.2"
          >
            {{ blood.tube_number }}
          </vue-barcode>
          <b :class="getClass(blood)">
            {{ blood.tube_number }} {{ blood.abo }} {{ blood.rhd }}
          </b>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import VueBarcode from 'vue-barcode'
  import { doPrint } from '@/api/blood'
  import { getOne } from '@/api/blood'
  export default {
    components: {
      VueBarcode,
    },
    data() {
      return {
        dialogVisible: false,
        title: '打印',
        blood: {},
        barcodeValue: '00000210012349',
        height: 32,
        bloodPrint: {
          hospital: {
            name: '中国人民解放军总医院',
            nameShort: '第一医学中心',
            code: '00000210012349',
            descri: '卫血站字[2012]第1号',
          },
          id: '02116274',
          capacity: 2,
          product: {
            name: '辐照去白RH(D)阴性机采血小板',
            code: 'B0011V00',
          },
          aboRhd: {
            abo: 'AB',
            rhd: '阴性',
            code: '8400',
          },
          time: {
            collect: '2021-08-02 13:30',
            pre: '2021-08-02 13:30',
            invalid: '2021-08-02 13:30',
            invalid_code: '0272051451',
          },
        },
        bloods: [
          {
            id: '24000738',
            name: '杜世强',
            id_pre: '02116274',
            aboRhd: 'AB+',
          },
          { id: '24000739 ', name: '段正淳', id_pre: '02116275', aboRhd: 'B+' },
        ],
        print: {
          id: 'printArea', // 必要，打元素的id
          popTitle: '打印', // 打印配置页上方标题
          extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
          preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
          previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
          previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
          zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
          previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
          previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
          beforeOpenCallback() {}, // 开启打印前的回调事件
          openCallback: () => {
            this.doPrint()
          }, // 调用打印之后的回调事件
          closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
          url: '',
          standard: '',
          extraCss: '',
        },
      }
    },
    methods: {
      async getOne(id) {
        const { data } = await getOne(id)
        this.blood = data
      },
      getInvalidCode() {
        if (this.blood) {
          if (this.blood.invalid_time_code) {
            return this.blood.invalid_time_code
          }
          if (this.blood.invalid_time) {
            return this.blood.invalid_time.substr(0, 10).replace('-', '')
          }
        }
        return ''
      },
      getClass(blood) {
        if (blood && blood.abo === 'AB') {
          return 'font17'
        }
        return 'font18'
      },
      async doPrint() {
        const { msg } = await doPrint(this.blood.id)
        this.$emit('getAll')
        this.$baseMessage(msg, 'success', 'vab-hey-message-success')
      },
      getBloodUser(blood) {
        if (blood.blood_user) {
          return blood.blood_user
        }
        if (blood.id_out) {
          return blood.id_out.replace('=', '').substr(5, 8)
        }
        return ''
      },
      substr(str, start, length) {
        if (str && str.length > 0) {
          return str.substr(start, length)
        }
        return ''
      },
      show(row) {
        this.getOne(row.id)
        this.dialogVisible = true
      },
      close() {
        this.blood = {}
        this.$emit('getAll')
      },
    },
  }
</script>

<style lang="scss" scoped>
  #printArea {
    width: 302px;
    color: #111;
  }
  .t-l {
    width: 151px;
  }
  .t-r {
    width: 151px;
  }
  .b-c {
    width: 151px;
  }
  .font {
    &10 {
      font-size: 20px;
      transform: scale(0.5); /* 然后缩小至80% */
      transform-origin: 0 0; /* 可能需要指定缩放原点以确保准确缩放 */
    }
    &12 {
      font-size: 12px;
    }
    &14 {
      font-size: 14px;
    }
    &16 {
      font-size: 16px;
    }
    &18 {
      font-size: 18px;
    }
    &20 {
      font-size: 20px;
    }
    &22 {
      font-size: 22px;
    }
    &24 {
      font-size: 24px;
    }
    &36 {
      font-size: 36px;
    }
    &40 {
      font-size: 40px;
    }
  }
  .mr {
    &4 {
      margin-right: 4px;
    }
    &6 {
      margin-right: 6px;
    }
    &8 {
      margin-right: 8px;
    }
    &10 {
      margin-right: 10px;
    }
    &12 {
      margin-right: 12px;
    }
  }
</style>
